<template>
    <div>
        <!-- 电影展示组件 start -->
        <!-- <div class="film-item" v-for="(item, index) in list" :key="index" > -->
        <router-link class="film-item" v-for="(item, index) in list" 
            :key="index" tag="div"
                :to="{
                    name:'detail',
                    params:{
                        filmId:item.filmId
                    }
                    
                }"
            >
            <!-- :imgId="item.filmId" -->
            <div
                class="film-img"
                :style=" `background-image: url(${item.filmImg})`"
            ></div>
            <div class="film-title">{{item.filmName}}</div>
            <div v-if="item.source" class="film-source">
                <span class="star-img" 
                    v-for="c in 5" 
                    :class=" Math.ceil(item.source)>=c?'open':'close' "
                    :key="c"
                ></span>
                <span class="star-source">{{ item.source*1 | addZero(1) }}</span>
            </div>
            <div v-if="!item.source" class="film-source">
                <span class="star-tip">暂无评分</span>
            </div>
        <!-- </div> -->
        </router-link>
        <!-- 电影展示组件 end -->
    </div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return [];
            }
        }
    }
}
</script>
<style lang="less" scope>
    .film-item{
        width: 2.35rem;
        height: 4.55rem;
        display: inline-block;
        margin-left: 0.1rem;
        vertical-align: top;
        >.film-img{
            height: 3.6rem;
            background-color: @gray-light;
            background-repeat: no-repeat;
            background-size: cover;
        }
        >.film-title{
            font-size: 0.26rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0.1rem;
        }
    }
</style>